<template>
    <div class="coupon-manager">
        <unify-header></unify-header>
        <div class="container">
            <div class="wrapper">
                <div class="main">
                    <h2 class="title">
                        <span>优惠券管理</span>
                    </h2>
                    <!--<div class="coupon-list">
                        <div class="coupon-container">
                            <div class="coupon-data" v-for="coupon in couponData" :key="coupon.couponCode">
                                <div class="amount">
                                    <div class="coupon-amount">
                                        <span class="digital">{{coupon.prefeAmount}}</span>
                                        <span class="unit">元</span>
                                    </div>
                                    <strong class="type">代金券</strong>
                                </div>
                                <div class="details">
                                    <em class="seal" :class="{overdue:coupon.isExpire==='Y',use:coupon.isUse==='Y'}"
                                        v-show="coupon.isExpire==='Y'||coupon.isUse==='Y'"></em>
                                    <span class="name">{{coupon.couponName}}</span>
                                    <strong class="instructions">{{couponType[coupon.productType]}}</strong>
                                    <span class="coupon-num">劵号：{{coupon.couponCode}}</span>
                                    <span class="time">{{coupon.validEndDate}}</span>
                                </div>
                            </div>
                        </div>
                    </div>-->
                    <div class="inputBox">
                        <div class="operation">
                            <el-input class="in-promo-code" v-model="input" placeholder="请输入优惠码"></el-input>
                            <el-button class="btn btn-exchange" @click="exchangeFun" type="danger">兑换</el-button>
                        </div>
                    </div>
                    <div v-show="dataList.length > 0">
                        <div class="couponList">
                            <ul class="couponList">
                                <li  :class="itmes.classNames" v-for="itmes in dataList">
                                    <div class="leftText">
                                        <p><span>¥</span>{{itmes.prefeAmount | subStrPrice}}</p>
                                        <p>代金券</p>
                                    </div>
                                    <div class="rightText">
                                        <!--<p>{{itmes.productType | showName}}</p>-->
                                        <p>仅限{{itmes.productTypeName}}产品使用</p>
                                        <p>{{itmes.couponCode}}</p>
                                        <p>有效期至{{itmes.validEndDate}}</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <el-pagination
                                small
                                layout="prev, pager, next"
                                :total="pageTotal" @current-change="updataCurrentPage">
                        </el-pagination>
                    </div>
                    <div v-show="dataList.length < 0" class="nowCouponList">
                        <p>当前还没有任何优惠券，如果您有优惠券券码，请在上方输入后兑换</p>
                    </div>
                </div>

                <left-menu selected="coupons"></left-menu>
            </div>
        </div>
        <Loading :loadingText="loadingText" :showLoading="showLoading"></Loading>
        <unify-footer></unify-footer>
    </div>
</template>

<script type="text/ecmascript-6">
    import UnifyHeader from 'components/header/header'
    import UnifyFooter from 'components/footer/footer'
    import LeftMenu from 'components/center/menu'
    import Api from '@/api.js'
    import filter from '@/filter.js'
    import Loading from '@/components/component/loading/loading'



    export default {
      filter,
      data: function () {
        return {
          input: '',
          couponData: [],
          dataList: [],
          couponType: {
            all: '全系列产品均可使用'
          },
          page: 1,
          pageTotal: 10,
          loadingText: '加载中...',
          showLoading: true,
          balance: 0
        }
      },
      methods: {
        initCounpon () {
          this.loadingText = '优惠劵获取中...'
          var jsons = {
            passId: localStorage.getItem("userDbId"),
            pageNo: this.page,
            pageSize: 10
          }
          Api.counpon.counponList(jsons).then(res => {
            //console.log(res.data.data.recordCount)
            this.pageTotal = res.data.data.recordCount
            this.dataList = res.data.data.coupons
            for (var i = 0; i < this.dataList.length; i++) {
              if (this.dataList[i].viewStatus === 'ok') {
                this.dataList[i].classNames = 'wsy'
              } else if (this.dataList[i].viewStatus === 'used') {
                this.dataList[i].classNames = 'ysy'
              } else if (this.dataList[i].viewStatus === 'expire') {
                this.dataList[i].classNames = 'ygq'
              } else if (this.dataList[i].viewStatus === 'wait') {
                this.dataList[i].classNames = 'wdq'
              }
            }
            this.showLoading = false
          })
        },
        exchangeFun () {
          if (this.input.length > 0) {
            this.showLoading = true
            this.loadingText = '优惠劵兑换中...'
            var jsons = {
              couponCode: this.input,
              passId: localStorage.getItem("userDbId")
            }
            Api.counpon.changeCupon(jsons).then(
             res => {
               if (res.data.status === "OK") {
                 this.$message({
                   showClose: true,
                   iconClass: "atrup_Message",
                   message: '兑换成功',
                   type: 'success'
                 })
                 this.showLoading = false
                 this.initCounpon()
               } else {
                 this.$message({
                   showClose: true,
                   iconClass: "atrup_Message",
                   message: res.data.message,
                   type: 'success'
                 })
                 console.log(res)
                 this.showLoading = false
               }
             }
			)
          } else {
            this.$message({
              showClose: true,
              iconClass: "atrup_Message",
              message: '请输入兑换码',
              type: 'success'
            })
          }
        },
        updataCurrentPage (currentPage) {
          this.page = currentPage
          this.initCounpon()
        }
      },
      components: {
        UnifyHeader,
        UnifyFooter,
        LeftMenu,
        Loading
      },
      watch: {},
      created: function () {
        for (let i = 0; i < 10; i++) {
          this.couponData.push({
            'isUse': 'Y',
            'couponName': 'all_40',
            'prefeAmount': 40,
            'validStartDate': '2017-03-30',
            'validEndDate': '2017-04-08',
            'isExpire': 'Y',
            'prefeType': 'dixian',
            'couponCode': '3wmPv3lc78HG',
            'productType': 'all'
          })
        }
        this.couponData[3].isUse = 'N'
      },
      mounted() {
        this.initCounpon()
      }
    }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">

    .coupon-manager {
        .btn {
            padding: 0 1.6em;
            font-size: 14px;
            line-height: 26px;
            background: #000000;
            border: 0;
            &:hover {
                background: #2b2b2b;
            }
        }
        .wrapper {
            width: 1152px;
            margin: 0 auto;
            overflow: hidden;
        }
        .container {
            padding: 14px 0 92px;
            background: #f1f1f1;
        }

        .main {
            position: relative;
            width: 960px;
            min-height: 668px;
            float: right;
            border-radius: 5px;
            border: 1px solid #dedede;
            background: #fff;
            .nowCouponList{
                width:100%;
                height:320px;
                position: relative;
                >p{
                    position: absolute;
                    bottom:0;
                    width:100%;
                    text-align: center;
                }
            }
            h2.title {
                padding-left: 30px;
                font-size: 16px;
                line-height: 55px;
                border-bottom: 1px solid #DEDEDE;
            }
            .inputBox{
                width:100%;
                background-color: #f8f8f8;
                border:1px solid #dedede;
                height:90px;
                box-sizing: border-box;
            }
            .operation {
                width:680px;
                margin: 26px auto;

            }
            .in-promo-code {
                display: inline-block;
                width: 570px;
                input {
                    &:-ms-input-placeholder {
                        text-align: center;
                    }
                    &::-webkit-input-placeholder {
                        text-align: center;
                    }
                }
            }
            .btn-exchange {
                line-height: 36px;
            }
            .coupon-list {
                width: 892px;
                padding: 10px 34px 0;
            }
            .coupon-container {
                width: 916px;
                font-size: 0;
            }
            .coupon-data {
                position: relative;
                display: inline-block;
                box-sizing: border-box;
                width: 436px;
                height: 125px;
                margin: 20px 20px 0 0;
                color: #d2d2d2;
                border: 1px solid #d2d2d2;
                border-radius: 6px;
                .amount {
                    position: relative;
                    width: 116px;
                    height: 100%;
                    background: #d2d2d2;
                    border-right: 4px dotted #fff;
                    .coupon-amount {
                        position: absolute;
                        top: 20px;
                        right: 0;
                        left: 0;
                        display: block;
                        font-size: 0;
                        color: #fff;
                        text-align: center;
                    }
                    .digital {
                        display: inline;
                        font-size: 27px;
                    }
                    .unit {
                        display: inline;
                        font-size: 18px;
                        font-weight: 400;
                    }
                    .type {
                        position: absolute;
                        top: 62px;
                        left: 50%;
                        width: 70%;
                        margin-left: -35%;
                        font-size: 18px;
                        text-align: center;
                        line-height: 2.4;
                        color: #fff;
                        border-top: 2px solid #fff;
                    }
                }
                .details {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 120px;
                    right: 0;
                    padding: 16px 0 0 23px;
                    .time {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        padding-right: 18px;
                        display: block;
                        font-size: 12px;
                        text-align: right;
                        line-height: 22px;
                        border-top: 1px dashed #d2d2d2;
                        &:before {
                            content: '有效期至：';
                            font-weight: 600;
                        }
                    }
                    .name, .instructions, .coupon-num {
                        display: block;
                        line-height: 1;
                    }
                    .name {
                        font-weight: 900;
                        font-size: 16px;
                    }
                    .instructions {
                        font-size: 14px;
                        margin-top: 12px;
                    }
                    .coupon-num {
                        font-size: 14px;
                        margin-top: 14px;
                    }
                }
            }
            .seal {
                position: absolute;
                top: 18px;
                right: 16px;
                display: block;
                width: 64px;
                height: 64px;
                border-radius: 50%;
                border: 3px solid #d2d2d2;
                &:before {
                    content: '';
                    display: block;
                    width: 50px;
                    height: 50px;
                    margin: 5px auto 0;
                    border: 2px solid #d2d2d2;
                    border-radius: 50%;
                }
                &:after {
                    content: '';
                    position: absolute;
                    top: 22px;
                    left: 5px;
                    padding: 0 1px;
                    display: block;
                    font-size: 15px;
                    font-style: normal;
                    font-weight: 600;
                    letter-spacing: 3px;
                    color: #d2d2d2;
                    line-height: 1.3;
                    background: #fff;
                    transform: rotate(-28deg);
                }
                &.overdue {
                    &:after {
                        content: '已过期';
                    }
                }
                &.use {
                    &:after {
                        content: '已使用';
                    }
                }
            }
        }
        .el-pagination {
            text-align: center;
            margin: 20px 0 40px;
            button:hover {
                color: #a00912;
            }
            .el-pager li:hover {
                color: #a00912;
            }
            .number {
                padding: 0 15px;
                font-size: 14px;
            }
            .number.active {
                border-color: #fff;
                background-color: #fff;
                color: #a00912;
            }
        }
    }

    .couponList {
            width: 892px;
   			padding: 10px 18px 0;
   			min-height: 200px;
   			overflow: hidden;

        li{
            width: 436px;
            height: 125px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            float: left;
            .leftText {
                width: 94px;
                height: 100%;
                overflow: hidden;
                float: left;
                > p:first-child {
                    font-size: 30px;
                    color: #5800db;
                    text-align: center;
                    margin-top: 14px;
					padding-left: 8px;
                    > span {
                        font-size: 30px;
                    }
                }
                > p:nth-child(2) {
                    text-align: center;
                    margin-top: 6px;
                    font-size: 16px;
                }
            }
            .clears {
                width: 0.8rem;
                height: 0.8rem;
                border: 1px solid #666;
                float: right;
                margin-top: 1.9rem;
                margin-right: 0.7rem;
                border-radius: 50%;
                position: relative;
                .clearXin {
                    width: 0.4rem;
                    height: 0.4rem;
                    background-color: #5800db;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto auto;
                    border-radius: 50%;

                }
            }
            .rightText {
                float: left;
                width: 300px;
                height: 100%;
                > p {
                    margin-left:14px;
                    color: #666666;

                }
                > p:first-child {
                    font-size: 16px;
                    margin-top: 16px;

                }
                > p {
                   font-size: 16px;
                   margin-top: 2px;
                }
            }
        }
        >li:nth-of-type(2n){
         	margin-left: 18px;
        }
        .wsy {
            background-image: url(http://image2.artup.com/static/pc/img/wsy_03.png) !important;
        }
        > li.ygq {
            background-image: url(http://image2.artup.com/static/mobile//ygqyhj_03.png);
            .leftText {
                > p:first-child {
                    color: #dedede;
                }
            }
        }
        > li.ysy {
            background-image: url(http://image2.artup.com/static/mobile//ysy.png);
            .leftText {
                > p:first-child {
                    color: #dedede;
                }
            }
        }
        .bny {
            background-image: url(http://image2.artup.com/static/mobile/yhjbnsy_03.png);
            .leftText {
                > p:first-child {
                    color: #dedede;
                }
            }
        }
    }
</style>
